<script lang="ts" setup>
import { MenuItem } from '../../components/menu/src/interface';

const data: MenuItem[] = [
  {
    name: '导航1',
    index: '1',
    icon: 'document',
  },
  {
    name: '导航2',
    index: '2',
    icon: 'document',
  },
  {
    name: '导航3',
    index: '3',
    icon: 'document',
    children: [
      {
        name: '导航3-1',
        index: '3-1',
        icon: 'document',
      },
    ],
  },
];

const data2: MenuItem[] = [
  {
    name: '导航1',
    index: '1',
    icon: 'Document',
  },
  {
    name: '导航2',
    index: '2',
    icon: 'Document',
  },
  {
    name: '导航3',
    index: '3',
    icon: 'Document',
    children: [
      {
        name: '导航3-1',
        index: '3-1',
        icon: 'Document',
        children: [
          {
            name: '导航3-1-1',
            index: '3-1-1',
            icon: 'Document',
            children: [
              {
                name: '导航3-1-1-1',
                index: '3-1-1-1',
                icon: 'Document',
              },
              {
                name: '导航3-1-1-2',
                index: '3-1-1-2',
                icon: 'Document',
              },
            ],
          },
        ],
      },
    ],
  },
];
</script>

<template>
  <div style="width: 300px">
    <mn-menu :data="data" default-active="3-1"> </mn-menu>
    <!-- <mn-menu-pro :data="data2"></mn-menu-pro> -->
  </div>
  <div style="width: 300px">
    <!-- <mn-menu :data="data" default-active="3-1"> </mn-menu> -->
    <mn-menu-pro :data="data2"></mn-menu-pro>
  </div>
</template>

<style lang="scss" scoped></style>
